import {
  LockOutlined,
  UserOutlined,
} from '@ant-design/icons';
import { Tabs } from 'antd';
import React, {useEffect, useState} from 'react';
import ProForm, { ProFormText } from '@ant-design/pro-form';
import {  connect} from 'umi';

import styles from './index.less';
import {history} from "@/.umi/core/history";

const Login = (props) => {
  useEffect(() =>{
    // useEffect
    const userInfo = localStorage.getItem('userInfo')
    if (userInfo) history.replace('/')
  },[])

  const { submitting } = props;
  const [type, setType] = useState('account');

  const handleSubmit = (values) => {
    const { dispatch } = props;
    dispatch({
      type: 'login/login',
      payload: { ...values},
    });
  };

  return (
    <div className={styles.main}>
      <ProForm
        initialValues={{
          autoLogin: true,
        }}
        submitter={{
          render: (_, dom) => dom.pop(),
          submitButtonProps: {
            loading: submitting,
            size: 'large',
            style: {
              width: '100%',
            },
          },
        }}
        onFinish={(values) => {
          handleSubmit(values);
          return Promise.resolve();
        }}
      >
        <Tabs activeKey={type} onChange={setType}>
          <Tabs.TabPane
            key="account"
            tab="账户邮箱登录"
          />
        </Tabs>
          <ProFormText
            name="username"
            fieldProps={{
              size: 'large',
              prefix: <UserOutlined className={styles.prefixIcon} />,
            }}
            placeholder="用户名：超级管理员"
            rules={[
              {
                required: true,
                message: '请输入用户名',
              },
            ]}
          />
          <ProFormText.Password
            name="password"
            fieldProps={{
              size: 'large',
              prefix: <LockOutlined className={styles.prefixIcon} />,
            }}
            placeholder="密码: 123456"
            rules={[
              {
                required: true,
                message: '请输入密码',
              },
            ]}
          />
      </ProForm>
    </div>
  );
};

export default connect(({ login, loading }) => ({
  userLogin: login,
  submitting: loading.effects['login/login'],
}))(Login);
